<template>
  <div class="app-container">
    <div class="table-main">
      <div class="table-sidebar">
        <div class="table-sidebar-title">桌台</div>
        <div class="title_box" v-for="(v, k) in roomArea" :key="k"
          :class="{ 'table-sidebar-item': true, active: zoneActive == k }" @click="onChangeTab('zone', k)">
          <div class="title">{{
          v.roomAreaName }}</div>
        </div>
      </div>
      <div class="table-panel" v-loading="loadingTable">
        <div class="search-big-view" :class="{'not-clearRoom':cleanRoomClass == false}"> 
            <ul class="table-type-tabs">
              <li :class="{ 'table-type-tab': true, active: typeActive == k }" v-for="(v, k) in typeList" :key="k"
                @click="onChangeTab('type', k)">
                <div :class="['table-type-tag', `${v.class}`]" v-if="k != 0"></div>
                <div class="table-type-name">{{ v.name }}</div>
                <div class="table-type-num">({{ v.num }})</div>
              </li>
            </ul>   
            <div class="postsearch-view">
                <el-input placeholder="请输入台号或营销员" v-model="postForm.key" class="search-input-key"></el-input>
            <div class="search-bot-item" @click="postFormSearch">查询</div>
            <div class="search-bot-item search-bot-clear" v-if="cleanRoomClass" @click="handleResetAll">一键清台</div>
            <div class="filter-order" ref="buttonRef2" v-click-outside="onClickOutside2">
                <div class="filter-text filter-pdleft" v-if="ls.get('ORDER_PAGE_INFO')?.orderText == null || ls.get('ORDER_PAGE_INFO')?.orderText == '默认排序'" @click="showFilter = true">默认排序</div>
                <div class="filter-text filter-md20" v-else @click="showFilter = true">{{ ls.get('ORDER_PAGE_INFO')?.orderText }}</div>
                <img src="https://oss.jtmckj.com/pc/images/order/bt-arrow.png" alt="">
                <div v-if="showFilter">
                  <el-popover class="custom-popover" ref="popoverRef2" :virtual-ref="buttonRef2" trigger="click"
                  virtual-triggering>
                  <div>
                        <div class="item-text" v-for="(item,index) in orderFilterList" :key="index" @click="orderFilterChange(item)">{{ item }}</div>
                  </div>
                </el-popover>
                </div>
       
            </div>   
          </div> 
        </div> 

        <!-- 桌台列表 -->
        <div class="table-list-overflow"  ref="scrollBox" >
        <ul class="table-list">
          <li class="table-item"
            :class="{ 'pre': v.roomStateDesc == '预订中', 'use': v.roomStateDesc == '使用中' || v.roomStateDesc == '未支付', 'res': v.roomStateDesc == '维修中' || v.roomStateDesc == '锁定', 'stbgf': v.isLock == '1' }"
            v-for="(v, k) in tableList" @click="handleTable(v)" :key="k">
            <div class="table-item-r1">
              <div class="r1-left">{{ v.roomName }}</div>
              <div class="r1-right"
                :class="{ 'pre': v.roomStateDesc == '预订中', 'use': v.roomStateDesc == '使用中', 'res': v.roomStateDesc == '维修中', 'nopay': v.roomStateDesc == '未支付' }">
                {{ v.roomStateDesc }}</div>
            </div>
            <div class="rooName-tornost" v-if="v.beforeRoomName">{{v.beforeRoomName}}转入</div>
            <div style="width: 100%;height: 10px;margin-top: 6px;" v-if="v.beforeRoomName"></div>
            <div v-if="v.roomStateDesc == '空闲中' || v.roomStateDesc == '维修中'">
              <div class="font-size16 margin-top-11"><span class="color-ffAA00">{{ v.arrivedPeopleCount || 0
                  }}</span>/{{ v.maxPeople || 0 }}</div>
              <div class="margin-top-48">赠送：{{ v.giftAmt }}</div>
              <!-- <div class="margin-top-2">订台人：{{ v.mainTainUserName }}</div> -->
              <div class="margin-top-2">来源：{{ v.consumeSourceType == '营销' ? v.mainTainUserName : v.consumeSourceType }}
              </div>
              <div class="margin-top-2">客户：{{ v.memberName }}</div>
              <div class="margin-top-2">备注：{{ v.remark }}</div>
              <div class="margin-top-2">低消：￥{{ v.minConsume }}</div>
            </div>

            <div v-else-if="v.roomStateDesc == '预订中'">
              <div class="font-size16 margin-top-11"><span class="color-ffAA00">{{ v.arrivedPeopleCount || 0
                  }}</span>/{{ v.maxPeople || 0 }}</div>
              <div class="margin-top-2">预留时间：{{ v.keepTime.slice(5) }}</div>
              <div class="margin-top-3">预订时间：{{ v.reserveTime.slice(5) }}</div>
              <div class="margin-top-5">赠送：{{ v.giftAmt }}</div>
              <!-- <div class="margin-top-2">订台人：{{ v.mainTainUserName }}</div> -->
              <div class="margin-top-2">来源：{{ v.reserveSourceType == '营销' ? v.mainTainUserName : v.reserveSourceType }}
              </div>
              <div class="margin-top-2">客户：{{ v.reserveMemberName }}</div>
              <div class="margin-top-2">备注：{{ v.remark }}</div>
              <div class="margin-top-2 chxy-row-bt">
                <div class="lable-over">低消：￥{{ v.minConsume }}</div>
                <div v-if="v.reserveConsumeCode" class="pre-order-but" @click.stop="toOpenPreOrder(v)">
                  预点<img class="right-img" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/order/right-y.png"
                    alt="">
                </div>
              </div>
            </div>

            <div v-else-if="v.roomStateDesc == '使用中' || v.roomStateDesc == '未支付'">
              <div class="flex-between font-size16 margin-top-11">
                <div><span class="color-ffAA00">{{ v.arrivedPeopleCount || 0 }}</span>/{{ v.maxPeople || 0 }}</div>
                <div>{{ v.elapsedTime }}</div>
              </div>
              <div v-if="v.roomStateDesc == '使用中'" class="font-size16 color-ffAA00 blod margin-top-5">已消费￥{{ v.realAmt ||
          0 }}</div>
              <!-- <div v-if="v.roomStateDesc == '使用中'" class="font-size16 color-ffAA00 blod" style="margin-top: 5px;">已开台</div> -->
              <div v-if="v.roomStateDesc == '未支付'" class="font-size16 color-ff3333 blod margin-top-5">
                未付￥{{ v.unPayAmt }}</div>
              <div class="margin-top-2">开台时间：{{ v.startTime.slice(5) }}</div>
              <div class="margin-top-2">赠送：{{ v.giftAmt }}</div>
              <!-- <div class="margin-top-2">订台人：{{ v.mainTainUserName }}</div> -->
              <div class="margin-top-2">来源：{{ v.consumeSourceType == '营销' ? v.mainTainUserName : v.consumeSourceType }}
              </div>
              <div class="margin-top-2 low-warp">客户：{{ v.memberName }}<span v-if="v.memberMobile">({{ v.memberMobile }})</span></div>
              <div class="margin-top-2">备注：{{ v.remark }}</div>
              <div class="margin-top-2">低消：{{ v.minConsume }}</div>
            </div>
            <img v-if="v.isLock == '1'" class="lock-img"
              src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/order/lock.png" alt="">
              <!-- 联台和转台同时  转台图标往左移-->
            <img v-if="v.beforeRoomCode" class="lock-img" :class="{'look-img-pleft':v.beforeRoomCode &&  v.subRooms}"
              src="https://oss.jtmckj.com/pc/images/common/i_icon_turn.png" alt="">
            <img v-if="v.isCall == '1'" @click.stop="gotoMessage(v)" class="call-img"
              src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/order/call.png" alt="">
            <!-- 主桌 -->
            <div class="main-box" v-if="v.subRooms">
              <div class="main-text" v-for="Rooms in v.subRooms" :key="Rooms.Code">联{{ Rooms.Name }}</div>
              <img  class="main-img" src="https://oss.jtmckj.com/pc/images/order/main-icon.png" alt="">
            </div>
            <!-- 副桌 -->
            <div class="sublt-box" v-if="v.mainRoom" :class="{'sublt-ts-class':v.mainRoom && v.beforeRoomCode}">
                <div class="liantai-text">联{{ v.mainRoom.Name }}</div>
            </div>
          </li>
          <li class="table-control" v-if="!['0024', '0025'].includes(ls.get('USER_INFO')?.orgCode)">
            <div class="table-contianr" v-if="totalPages > 1"
              style="display: flex;flex-direction: column;justify-content: space-between;">
              <div class="table-btn" data-type="up" :class="{ 'disabled_color': postForm.pageIndex === 1 }"
                v-if="postForm.pageIndex === 1">上一页</div>
              <div class="table-btn" data-type="up" v-else @click="prevPage">上一页</div>
              <div class="table-btn" :class="{ 'disabled_color': !canNextPage }" v-if="!canNextPage" data-type="down">
                下一页</div>
              <div class="table-btn" v-else data-type="down" @click="nextPage">下一页</div>
            </div>
          </li>
        </ul>
      </div>
      </div>
    </div>
    <el-dialog top="80px" v-model="showMessage" :show-close="false" width="30%">
      <div class="confirmPopue">
        <div class="confirmPopue-title">呼叫提示</div>
        <div class="confirmPopue-center">{{ mesRoomName }}呼叫服务员</div>
        <div class="popup-btn">
          <div class="btn-submit" @click="confirmMsg">确认</div>
        </div>
      </div>
    </el-dialog>
    <ActionDialog ref="ActionDialogRef" v-if="actionDialogVisible" :visible="actionDialogVisible"
      @emitCancel="emitActionDialogCancel" @emitSubmit="emitActionDialogSubmit" />

    <!-- 预点单详情 -->
    <PreOrderTable ref="preOrderTableRef" v-model="preOrderTableShow" @cancel="preOrderTableShow = false" />
    <ResetAllDialog ref="ResetAllRef"  :visible="ResetAllVisible" :multipleSelection="CleartableList" @emitCancel="emitResetAllCancel" @Openemit="Openemit" @closeDialog="closeDialog" @closeLoading="closeLoading" @emitSubmit="emitResetAllSubmit" />
  </div>
</template>

<script setup>
import PreOrderTable from '@/views/components/PreOrderTable.vue'
import ActionDialog from './components/actionDialog.vue'
import Api from '@/api'
import { formatDate, calculateElapsedTime } from '@/utils/chenhao'
import ls from '@/lib/ls'
import useConfigStore from '@/store/config'
import dayjs from "dayjs"
import { fa } from 'element-plus/es/locales.mjs'
import ResetAllDialog from '@/views/workbench/cashier/dialog/resetAllDialog.vue'


// 获取房台
const postForm = ref({
  reserveTime: formatDate('YY-MM-DD hh:mm:ss'),
  roomState: '',
  typeCode: '',
  pageSize: 17,
  pageIndex: 1,
  key:''
})

if(ls.get('USER_INFO')?.orgCode == '0024' || ls.get('USER_INFO')?.orgCode == '0025') {
      postForm.value.pageSize = 999
} 

// 左侧桌台列表
const zoneActive = ref(0)
const orderPageInfo = ls.get('ORDER_PAGE_INFO') || {};
if(orderPageInfo.zoneActive) {
     zoneActive.value = ls.get('ORDER_PAGE_INFO').zoneActive
} 
// const zoneList = ref([])
// const getTableType = () => {
//   Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "contentData": { "parentCode": "101" }, "orgCode": "0004" })
//     .then(res => {
//       let newArray = [{ code: '', name: '全部' }]
//       Array.prototype.push.apply(newArray, res.result)
//       zoneList.value = newArray
//     })
// }
// getTableType()

const configStore = useConfigStore()
configStore.curTableDate = ref(dayjs().format('YYYY-MM-DD'))
const roomArea = ref([])
// 获取房台分区
const getRoomArea = () => {
  let newArray = [{ roomAreaCode: '', roomAreaName: '全部' }]
  Array.prototype.push.apply(newArray, configStore.roomArea)
  roomArea.value = newArray
  console.log(roomArea.value);
}
getRoomArea()
// 桌台状态列表
const typeActive = ref(0)

if(orderPageInfo.typeActive) {
  typeActive.value = ls.get('ORDER_PAGE_INFO').typeActive
}
const typeList = ref([])
console.log('configStore.typeList', configStore.typeList)
typeList.value = configStore.typeList
// 点击桌台和桌台状态事件
const onChangeTab = (type, k, v) => {
  switch (type) {
    case 'zone':
      zoneActive.value = k
      postForm.value.areaCode = roomArea.value[k].roomAreaCode
      orderPageInfo.pageIndex = 1
      ls.set('ORDER_PAGE_INFO', { ...orderPageInfo, zoneActive: k,roomAreaCode:roomArea.value[k].roomAreaCode});
      ls.remove('ORDER_PAGE_Scroll')
      getTableInfo(true)
      CopygetTableInfo()
      break
    case 'type':
      typeActive.value = k
      // console.log(typeList.value[k].state);
      postForm.value.roomState = typeList.value[k].state
      orderPageInfo.pageIndex = 1
      ls.set('ORDER_PAGE_INFO', { ...orderPageInfo, typeActive: k,roomState:typeList.value[k].state});
      ls.remove('ORDER_PAGE_Scroll')
      getTableInfo(true)
      restoreScrollPosition();
      CopygetTableInfo()
      break
  }
}

const pageCount = ref('')

// 桌子列表
const tableList = ref([])
// 获取桌子状态信息和列表
let elapsedTimeInterval = null
const getTableInfo = (flag) => {
  // postForm.value.pageIndex = 1
  loadingTable.value = true
  if (flag) {
    postForm.value.pageIndex = 1
  } else {
  if(orderPageInfo.pageIndex) {
       postForm.value.pageIndex = ls.get('ORDER_PAGE_INFO').pageIndex
  } 
   if(orderPageInfo.roomAreaCode) {
       postForm.value.areaCode = ls.get('ORDER_PAGE_INFO').roomAreaCode
  } 
  if(orderPageInfo.roomState) {
       postForm.value.roomState = ls.get('ORDER_PAGE_INFO').roomState
   }

   if(orderPageInfo.orderStatus) {
       postForm.value.order = ls.get('ORDER_PAGE_INFO').orderStatus
   }
  }  
  

  Api.Common.PcObjProcess.Do({ "functionName": "GetTodayRoomInfo", "orgCode": "0004", "contentData": postForm.value })
    .then(res => {
      console.log('获取桌子状态信息和列表 res :>> ', res.result[0]);
      clearInterval(elapsedTimeInterval)
      tableList.value = res.result[0].areaRooms
      typeList.value[0].num = res.result[0].totalCount
      typeList.value[1].num = res.result[0].noCount
      typeList.value[2].num = res.result[0].reserveCount
      typeList.value[3].num = res.result[0].useCount
      typeList.value[4].num = res.result[0].unPayCount
      typeList.value[5].num = res.result[0].repairCount
      typeList.value[6].num = res.result[0].lockCount
      pageCount.value = res.result[0].allCount
      console.log(pageCount.value, 'xllllllllllllllllllllll-')
      totalPages.value = 0
      tableList.value.forEach(item => {
        item.elapsedTime = item.startTime ? calculateElapsedTime(item.startTime) : ''
      });
      configStore.curTable = tableList.value
      loadingTable.value = false
      elapsedTimeInterval = setInterval(() => {
        console.log('计时器计算开台时长')
        tableList.value.forEach(item => {
          item.elapsedTime = item.startTime ? calculateElapsedTime(item.startTime) : ''
        });
      }, 60000)
    })
    
    // 定位滚动位置
    setTimeout(() => {
      restoreScrollPosition(); 
    }, 500);  
    
}

onUnmounted(() => {
  console.log('销毁 :>> ',);
  clearInterval(elapsedTimeInterval)
})


const postFormSearch = () => {
   // 
   getTableInfo(true)
}


const totalPages = computed(() => Math.ceil(pageCount.value / postForm.value.pageSize));
console.log(totalPages, '总页数')

const canNextPage = computed(() => postForm.value.pageIndex < totalPages.value);

//上一页
const prevPage = () => {
  if (postForm.value.pageIndex > 1) {
    postForm.value.pageIndex--
  }

  let orderPageInfo = ls.get('ORDER_PAGE_INFO') || {};
  ls.set('ORDER_PAGE_INFO', { ...orderPageInfo, pageIndex: postForm.value.pageIndex });


  getTableInfo()
}

//下一页
const nextPage = () => {
  if (postForm.value.pageIndex) {
    postForm.value.pageIndex++;
  }
  let orderPageInfo = ls.get('ORDER_PAGE_INFO') || {};
  ls.set('ORDER_PAGE_INFO', { ...orderPageInfo, pageIndex: postForm.value.pageIndex });
  getTableInfo()
}

// 点击桌台
const router = useRouter()
const handleTable = (v) => {
  console.log('v :>> ', v);
  ls.remove('TABLE_BTN')
  ls.set('TABLE_INFO', v)
  if (v.roomStateDesc == '使用中' || v.roomStateDesc == '未支付') {
    router.push({
      path: '/order/orderTable',
    })
  }
  else if (v.roomStateDesc == '空闲中' || v.roomStateDesc == '预订中' || v.roomStateDesc == '维修中') {
    handleAction(v)
  }
}

// ------------------------弹窗模块-----------------------
// 桌台操作弹窗
let actionDialogVisible = ref(false)
const ActionDialogRef = ref()
const handleAction = (table) => {
  actionDialogVisible.value = true
  nextTick(() => {
    ActionDialogRef.value.open(table)
  });
}
// 点击弹窗里的取消按钮
const emitActionDialogCancel = (params) => {
  actionDialogVisible.value = false
  // getTableInfo()
}
// 点击弹窗里的确定按钮
const emitActionDialogSubmit = (params) => {
  actionDialogVisible.value = false
  getTableInfo()
}

const showMessage = ref(false)
const mesRoomName = ref('')
const mesRoomCode = ref('')
const gotoMessage = (e) => {
  console.log(e);
  mesRoomName.value = e.roomName
  mesRoomCode.value = e.roomCode
  showMessage.value = true

}

const confirmMsg = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "DoCallRoom", "contentData": { roomCode: mesRoomCode.value } })
    .then(res => {
      showMessage.value = false
      getTableInfo(true)
    })
}


// 打开预点订单信息弹窗 查看明细
const preOrderTableShow = ref(false)
const preOrderTableRef = ref()
const toOpenPreOrder = (item) => {
  nextTick(() => {
    item['consumeCode'] = item.reserveConsumeCode
    preOrderTableRef.value.initData(item)
    preOrderTableShow.value = true
  });
}


// -----------------------------------------------------------监听页面滚动位置----------------------------------------------------------
const scrollBox = ref(null);
 // 恢复滚动位置
 const restoreScrollPosition = () => {
      const savedPosition =  ls.get('ORDER_PAGE_Scroll')
      if (savedPosition !== undefined && scrollBox.value) {
        scrollBox.value.scrollTop = savedPosition;
      }
  };
    
  // 保存滚动位置
  const saveScrollPosition = () => {
    if (scrollBox.value) {
      const position = scrollBox.value.scrollTop;
      ls.set('ORDER_PAGE_Scroll',position)
    }
  };

    // 使用防抖操作，减少滚动事件频繁触发
    let debounceTimer;
    let restoreTimer; 
    const handleScroll = () => {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(() => {
        saveScrollPosition();
      }, 200);  // 延迟200ms保存滚动位置
    };

  const loadData = async () => {
    if(ls.get('USER_INFO')?.orgCode == '0024' || ls.get('USER_INFO')?.orgCode == '0025') {
        await getTableInfo()
        // clearTimeout(restoreTimer);
        // restoreTimer = setTimeout(() => {
        //   restoreScrollPosition();  // 恢复滚动位置
        // }, 300);
        nextTick(() => {
            restoreScrollPosition();  // 直接调用滚动恢复函数
          });
      } else {
        await getTableInfo()
      }
  };


// ------------------------------------------------ 清台操作 --------------------------------------------------------------------
const ResetAllVisible = ref(false) //清台弹层
const CleartableList = ref([])//清台房台列表
const loadingTable = ref(false)//房台加载loading

const handleResetAll = ()=> {
  if(CleartableList.value.length >0) {
    ResetAllVisible.value = true
  } else  {
    ElNotification({
        title: '提示',
        message: '暂无桌台可清',
        type: 'warning',
    })
  }
}

//打开加载loading
const Openemit = ()=> {
  loadingTable.value = true
}

const closeDialog = ()=> {
  ResetAllVisible.value = false
}

const closeLoading = ()=> {
        loadingTable.value = false
        getTableInfo()
}

// 点击弹窗里的取消按钮
const emitResetAllCancel = (params) => {
    ResetAllVisible.value = false
}
// 点击弹窗里的确定按钮
const emitResetAllSubmit = (params) => {
    ResetAllVisible.value = false
    loadingTable.value = false
    getTableInfo()
    CopygetTableInfo()
} 
//复制房台列表数据
const CopygetTableInfo = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetReserveRoomList", "orgCode": "0004", "contentData": {...postForm.value,pageSize:1,pageSize:999} })
    .then(res => {
      CleartableList.value = res.result[0].areaRooms.filter(room => room.roomStateDesc !== "预订中" && room.roomStateDesc !== "空闲中")
      console.log(res, '查询清台列表数据--------------------------------')
      console.log(res.result[0].allCount, '数量')
    })
}




// -----------------------------------------------排序筛选------------------------------------------------
const buttonRef2 = ref()
const popoverRef2 = ref()
const TempFliterText = ref('默认排序')
const orderFilterList = ref(['默认排序','实收从高到低','总消从高到低'])
const showFilter = ref(true)
const orderFilterChange = (v) => {
          TempFliterText.value = v
          showFilter.value = false
           if(v == '默认排序') {
               postForm.value.order = 0
           } else if(v == '实收从高到低') {
               postForm.value.order = 1
           } else {
               postForm.value.order = 2
           }
          ls.set('ORDER_PAGE_INFO', { ...orderPageInfo, orderStatus: postForm.value.order,orderText:TempFliterText.value});
          getTableInfo()
}

const onClickOutside2 = () => {
  unref(popoverRef2).popperRef2?.delayHide?.()
}

const cleanRoomClass = ref(false)
const getMenutakeState = ()=> {
    const userRoleALL = ls.get('USER_ROLE_ALL')
    const userRole = userRoleALL.map(item => item.name);  
    console.log(userRole,'userRole')
    if (userRole.includes('cashier-cleanRoom')) { 
        cleanRoomClass.value = true
    }
}


    onMounted(() => {
      // 监听滚动事件
      if (scrollBox.value) {
        scrollBox.value.addEventListener('scroll', handleScroll);
      }
      
      // 加载数据并恢复滚动位置
      loadData();
      CopygetTableInfo()
      getMenutakeState()
    });

    onBeforeUnmount(() => {
      // 移除滚动事件监听
      if (scrollBox.value) {
        scrollBox.value.removeEventListener('scroll', handleScroll);
      }
      clearTimeout(debounceTimer);
      clearTimeout(restoreTimer);
    });


</script>

<style scoped lang="scss">
@import '@/styles/com_style_input.css';

.table-main {
  display: flex;
  min-height: 840px;

  .table-sidebar {
    background: #ffffff;
    border-radius: 8px;
    text-align: center;
    min-width: 120px;

    .title_box {
      width: 120px;
      // padding: 18px 0;
      height: 60px;
      line-height: 60px;
      font-size: 17px;
      color: #666666;
      text-align: center;
      cursor: pointer;

      .title {
        margin: 0 auto;
        width: 80px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #D9D9D9;
        white-space: nowrap;
      }
    }

    &-title {
      padding: 30px 0;
      border-bottom: 1px solid #e6e6e6;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 18px;
      color: #000000;
      line-height: 18px;
    }

    &-list {}

    .active {
      background: #ffe566;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #212121;
      line-height: 18px;

      .title {
        font-size: 17px;
        border: none !important;
      }
    }

    .title_box:nth-last-child(1) .title {
      border-bottom: none;
    }
  }

  .table-panel {
    padding-left: 20px;
    margin-left: 20px;
    padding: 0px 20px 20px 20px;
    background: #ffffff;
    border-radius: 8px;

    .table-type-tabs {
      padding: 23px;
      display: flex;

      .table-type-tab {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        display: flex;
        margin-right: 19px;
        cursor: pointer;
        align-items: center;

        &.active {
          .table-type-name {
            color: #ff6a00;
          }
          .table-type-num {
            color: #ff6a00;
          }
        }
      }

      .table-type-tag {
        width: 12px;
        height: 12px;
        margin-right: 8px;

        &.free {
          background: #77d977;
        }

        &.book {
          background: #77c8d9;
        }

        &.used {
          background: #d9b877;
        }

        &.stop {
          background: #cccccc;
        }

        &.nopay {
          background: #FF3333;
          color: #FFFFFF;
        }

        &.lock {
          background: #6666FF;
          color: #FFFFFF;
        }
      }

      .table-type-name {
        color: #666666;
      }

      .table-type-num {
        color: #666666;
      }
    }

    .table-list {
      padding-top: 8px;
      width: 1350px; 
      border-top: 1px solid #e6e6e6;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;

      .table-item {
        position: relative;
        padding: 12px;
        width: 210px;
        height: 244px;
        // text-align: center;
        background: #daf2da;
        border-radius: 8px;
        border: 1px solid #f2f2f2;
        // padding-bottom: 20px;
        // margin-top: 20px;
        margin-right: 1px;
        font-size: 14px;
        color: #212121;
        cursor: pointer;

        &.pre {
          background: #DAEEF2;
        }

        &.use {
          background: #F2EADA;
        }

        &.res {
          background: #E6E6E6;
        }

        &.nopay {
          background: #FF3333;
          color: #FFFFFF;
        }

        &.lock {
          background: #6666FF;
          color: #FFFFFF;
        }

        &:nth-child(8n) {
          // margin-right: 0;
        }

        &-name {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 24px;
          color: #212121;
          line-height: 24px;
          padding-top: 24px;
        }

        &-type {
          background: #77d977;
          border-radius: 4px;
          width: 80px;
          padding: 6px 0;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          line-height: 20px;
          margin: auto;
          margin-top: 24px;

          &.pre {
            background: #77C8D9;
            color: #FFFFFF;
          }

          &.use {
            background: #D9B877;
            color: #FFFFFF;
          }

          &.res {
            background: #CCCCCC;
            color: #FFFFFF;
          }
        }

        &-max {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
          padding-top: 20px;
        }

        &-low {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #212121;
          line-height: 16px;
          padding-top: 20px;
        }

        .low-warp {
            display: flex;
            flex-wrap: wrap;
            width: 180px;
          white-space: nowrap;          /* 禁止文本换行 */
          overflow: hidden;             /* 隐藏溢出的文本 */
          text-overflow: ellipsis;      /* 超出部分显示省略号 (...) */
          display: inline-block;        /* 确保容器能够处理文本溢出 */
          max-width: 100%;              /* 根据需要限制最大宽度，避免超出容器 */
          }

        .table-item-r1 {
          display: flex;
          justify-content: space-between;

          .r1-left {
            flex: 1;
            font-weight: bold;
            font-size: 20px;
            color: #212121;
          }

          .r1-right {
            width: 60px;
            height: 26px;
            background: #77D977;
            border-radius: 4px;
            font-size: 15px;
            color: #FFFFFF;
            line-height: 26px;
            text-align: center;

            &.pre {
              background: #77C8D9;
              color: #FFFFFF;
            }

            &.use {
              background: #D9B877;
              color: #FFFFFF;
            }

            &.res {
              background: #CCCCCC;
              color: #FFFFFF;
            }

            &.nopay {
              background: #FF3333;
              color: #FFFFFF;
            }

          }
        }

        .flex-between {
          display: flex;
          justify-content: space-between;
        }

        .font-size16 {
          font-size: 16px;
        }

        .color-ffAA00 {
          color: #ffAA00;
        }

        .color-ff3333 {
          color: #ff3333
        }

        .blod {
          font-weight: bold;
        }

        .lock-img {
          position: absolute;
          right: 5px;
          top: 188px;
          width: 40px;
          height: 40px;
        }

        .call-img {
          position: absolute;
          right: 8px;
          top: 165px;
          width: 60px;
          height: 60px;
        }
        .main-box {
          position: absolute;
          right: 8px;
          bottom: 8px;
        .main-text {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #FF6A00;
          }
          .main-img {
          width: 40px;
          height: 40px;
           }
        
        }
       
        .sublt-box {
          position: absolute;
          right: 8px;
          bottom: 10px;
          display: flex;
          .liantai-text {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #FF6A00;
          }
        }
      }

      .table-control {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 210px;

        // margin-top: 20px;
        .table-contianr {
          height: 240px;
        }

        .table-btn {
          height: 110px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 24px;
          color: #212121;
          line-height: 24px;
          padding: 33px 0;
          text-align: center;
          background: #ffffff;
          border-radius: 8px;
          border: 1px solid #e6e6e6;
          cursor: pointer;
        }
      }
    }
    .table-list-overflow {
      height: 777px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .table-list-overflow::-webkit-scrollbar { 
          width: 5px;
          height: 4px;
      }
    .table-list-overflow::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    .table-list-overflow::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 10px;
    }
  }
}

.margin-top-2 {
  margin-top: 2px;
  font-size: 13px;
}

.margin-top-3 {
  margin-top: 3px;
}

.margin-top-4 {
  margin-top: 4px;
}

.margin-top-5 {
  margin-top: 5px;
}

.margin-top-6 {
  margin-top: 6px;
}

.margin-top-7 {
  margin-top: 7px;
}

.margin-top-8 {
  margin-top: 8px;
}

.margin-top-9 {
  margin-top: 9px;
}

.margin-top-10 {
  margin-top: 10px;
}

.margin-top-11 {
  margin-top: 3px;
}

.margin-top-48 {
  margin-top: 48px;
}

.lable-over {
  width: 140px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pre-order-but {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #FF6A00;
  height: 18px;
  line-height: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  .right-img {
    width: 7px;
    height: 12px;
    margin-left: 2px;
  }
}

.disabled_color {
  background: #f9f9f9 !important;
  color: #E5E5E5 !important;
  // margin-bottom: 12px;
}

.stbgf {
  background: #e7e7e7 !important;
}

.confirmPopue {
  .confirmPopue-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
  }

  .confirmPopue-center {
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 500;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding: 40px 0;

    .top-item {
      display: flex;
      align-items: center;
      padding: 0px 60px 20px;

      .top-item-title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
        width: 120px;
      }

      ::v-deep(.el-select__wrapper) {
        width: 40%;
      }
    }

  }

  .popup-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    .btn-cancle {
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FF6A00;
      line-height: 60px;
      width: 160px;
      height: 60px;
      background: #FFFFFF;
      border-radius: 8px;
      border: 1px solid #FF6A00;
      margin-right: 36px;
      cursor: pointer;
    }

    .btn-submit {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      line-height: 60px;
      text-align: center;
      width: 160px;
      height: 60px;
      background: #FF6A00;
      border-radius: 8px;
      cursor: pointer;
    }
  }

  ::v-deep(.el-select__icon) {
    width: 18px;
    height: 11px;
    color: #212121;
    font-weight: 700;
  }

  ::v-deep(.el-input__inner) {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #212121;
    line-height: 16px;
  }

  ::v-deep(.el-radio__inner) {
    // margin-left: 20px;
    width: 20px;
    height: 20px
  }

  ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #ff6a00;
    /* 选中状态边框颜色 */
    background-color: #ffffff;
    /* 选中状态背景颜色 */
  }

  ::v-deep(.el-radio__inner:after) {
    background-color: #ff6a00;
    width: 8px;
    height: 8px;
  }

  ::v-deep(.el-select__prefix) {
    display: none
  }
}

.search-big-view{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.not-clearRoom {
  justify-content: space-between;
   .search-input-key {
      width: 220px !important;
   }
  .filter-order {
      .filter-pdleft {
        padding-left: 0;
      }
  }
}
.postsearch-view {
  display: flex;
  flex-direction: row;

  .search-input-key {
    width: 160px;
    margin-right: 10px;
  }

  .search-bot-item {
    width: 100px;
    height: 48px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #212121;
    line-height: 48px;
    background: #FFE566;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 20px;
  }
  .search-bot-clear {
    background: #E6E6E6;
    color: #666666;
  }
}

::v-deep .el-loading-mask {
   background: rgba(0, 0, 0, 0.2) !important;
   .circular {
    width: 80px;
    height: 80px;
   }
}

.filter-order {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-right: 20px;

  img {
    width: 16px;
    height: 8px;
  }

  .filter-text {
    margin-right: 6px;
    font-weight: 400;
    font-weight: 400;
    font-size: 18px;
    color: #FF6A00;
  }
  .filter-pdleft {
    padding-left: 50px;
  }
  .filter-md20 {
     margin-left: 26px;
  }
   
}
.item-text {
    cursor: pointer;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    color: #212121;
    border-bottom: 1px solid #E6E6E6;
  }
  .item-text:nth-last-child(1){
    border-bottom: none;
   }
   .look-img-pleft {
    right: 60px !important;
   }
   .rooName-tornost {
    position: absolute;
    left: 0;
    padding: 0 13px;
    height: 16px;
    background: #ff6a00;
    border-radius: 0px 4px 4px 0px;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 36px;
    text-align: center;
    line-height: 16px;
   }
   .sublt-ts-class {
    padding-right: 40px;
   }
</style>
